Parent | Child | Previous | Next
 

Toggle display of a container or DIV with animation

Description

Adds toggle animation to a DIV or container. When the action is run the dive or container will be shown or hidden using a specified animation such as 'slide' or 'puff'. Different animations can be specified for the show and hide events. Different animation times can also be set in this actions properties list.

images/tdex.png

Used with the Grid and UX components. This action is described in this video.

Toggle Visibility

Mode

Specify if the visibility of the element should be toggled, or explicitly set to shown or hidden.

Object type

Specify if the object you want to toggle the visibility or is a Container control, or arbitrary DIV.

DIV ID

Specify the ID of the DIV.

Show animation style

Select the animation method to use when the window is shown. Fade and Slide use methods in jQuery core. Other options require jQueryUI.

Show animation speed

Specify the animation speed. You can select a pre-defined option (slow = 600 milliseconds, fast = 200 milliseconds), or you can enter an explicit value in milliseconds.

onShowComplete Javascript

(Optional) Specify the Javascript to execute when the animation that shows the element has completed.

Hide animation style

Select the animation method to use when the window is closed. Fade and Slide use methods in jQuery core. Other options require jQueryUI.

Hide animation speed

Specify the animation speed. You can select a pre-defined option (slow = 600 milliseconds, fast = 200 milliseconds), or you can enter an explicit value in milliseconds.

onHideComplete Javascript

(Optional) Specify the Javascript to execute when the animation that hides the element has completed.

Create an Animated DIV

  1. In the UX Builder on the UX Controls page open the 'Other Controls' menu. Click on the [Static Text] option to add a Static Text control to the component.

    images/td2.png

  2. In the properties list on the right of the controls page click the button next to the 'Static text' property in the 'Button Properties' section.

    images/td3.png

  3. Define the following <div> and click OK. Make sure the div has an id. 

    <div id=div1>
This is the Static Text that will be animated when the toggle display 
action fires.</div>
<br>
    images/td4.png

  4. In the 'Other Controls' menu click on the [Button] option to add a button control to the component.

    images/td5.png

  5. In the properties list change the 'Button text' property to read 'Toggle'.

    images/td6.png

  6. Scroll down to the 'Javascript - (Touch, Mouse, Pointer Events)' section and click the button next to the 'click' property.

    images/td7.png

  7. In the 'Edit Click Event' dialog check the 'Action Javascript' radio button and then click the 'Add New Action' button.

    images/td8.png

  8. Type 'toggle' into the Filter list and select the 'Toggle display of a container or DIV with animation' action from the actions list. Click OK.

    images/td9.png

  9. In the Toggle Display properties list set the 'Mode' property to 'Toggle Visibility'.

    images/td10.png

  10. Set the 'Object type' property to be 'DIV'

    images/td11.png

  11. Next to the 'DIV ID' property type 'div1'. This is the id of the div that was defined in the Static Text control.

    images/td12.png

  12. For the 'Show animation style' property select 'Slide'

    images/td13.png

  13. For the 'Hide animation style' property select 'Fade'. Click OK and Save to exit.

    images/td14.png

  14. Run the component in Live Preview. Click the Toggle button. The Static Text control should disappear using the 'Fade' animation

    images/td15.png

  15. Click the Toggle button again and the Static Text should reappear on the screen using the 'Slide' animation.

    images/td16.png

  16. The Static Text...

    images/td17.png

Videos

Using Action Javascript to toggle the show/hide state of any arbitrary DIV or 'container' using animation

Animation is built into many of the objects, but there may be times when you want to animate some arbitrary DIV or container. This is easy to accomplish using Action Javascript. You can define complex animations without having to write any code.

Open a Grid Component - Invoking Server-side Events Handlers

When you have a client-side event handler (such as a button's onClick event) that opens a Grid (in a popup Ajax window, a div, a tabbed UI pane, etc.), you might want to execute some Xbasic on the server before the Grid is executed on the server.

The first time a Grid is opened in a pop-up window, the {grid.object}.openChildGrid() method is called. If the pop-up window is then closed, and the event is executed a second time, the {grid.object}.synchronizeGrid() method is called. These two events now set variables (__openChildGrid and __synchronizeGrid) that you can test for in the onGridExecute server-side event. If the variables are found, then you know that the user has just invoked an event that will open a Grid.

Here is some sample code that you can add to the onGridExecute server-side event:

dim flagExecuteSpecialEvent as l = .f.
if eval_valid("request.variables.__openChildGrid") then
    if request.variables.__openChildGrid = "true" then
        flagExecuteSpecialEvent = .t.
    end if
end if
 
if eval_valid("request.variables.__synchronizeGrid") then
    if request.variables.__synchronizeGrid= "true" then
        flagExecuteSpecialEvent = .t.
    end if
end if
 
if flagExecuteSpecialEvent = .t. then
    mySpecialEvent(e)
end if

See Also